import 'package:code_text_field/code_text_field.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
// Import the language & theme
import 'package:highlight/languages/dart.dart';

class ActionWidget extends StatefulWidget {
  const ActionWidget({super.key});

  @override
  State<ActionWidget> createState() => _ActionWidgetState();
}

class _ActionWidgetState extends State<ActionWidget>
    with TickerProviderStateMixin {
  final List<String> items = [
    'CreateNewChannel',
    'DeleteChannel',
    'GetChannelConnCount',
    'DeleteChannelMembers',
    'MultipleIdentitySubscribleChannel',
    'PublishToChannel',
    'PublishToSomeoneInChannel',
  ];
  String? selectedValue;

  String code = """
{
  "action": "CreateNewChannel",
  "channel": "test",
  "channelMembers": [
    "test1",
    "test2"
  ]
}
""";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _codeController = CodeController(
      text: code,
      language: dart,
    );
  }

  CodeController? _codeController;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Card(
            color: Colors.white,
            elevation: 1,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5),
            ),
            margin: const EdgeInsets.all(20),
            child: Container(
              padding: const EdgeInsets.all(10),
              child: Form(
                  child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: DropdownButtonHideUnderline(
                          child: DropdownButton2<String>(
                            isExpanded: true,
                            hint: Text(
                              '选择操作',
                              style: TextStyle(
                                fontSize: 14,
                                color: Theme.of(context).hintColor,
                              ),
                            ),
                            items: items
                                .map((String item) => DropdownMenuItem<String>(
                                      value: item,
                                      child: Text(
                                        item,
                                        style: const TextStyle(
                                          fontSize: 14,
                                        ),
                                      ),
                                    ))
                                .toList(),
                            value: selectedValue,
                            onChanged: (String? value) {
                              setState(() {
                                selectedValue = value;
                              });
                            },
                            buttonStyleData: ButtonStyleData(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 16),
                                height: 50,
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: const Color.fromARGB(
                                        255, 134, 134, 134),
                                  ),
                                  borderRadius: const BorderRadius.all(
                                    Radius.circular(5),
                                  ),
                                )),
                            menuItemStyleData: const MenuItemStyleData(
                              height: 40,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    children: [
                      Flexible(
                        flex: 5,
                        child: CodeField(
                          controller: _codeController!,
                          textStyle: const TextStyle(fontFamily: 'SourceCode'),
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            loading = true;
                          });
                        },
                        style: ButtonStyle(
                            fixedSize:
                                MaterialStateProperty.all(const Size(100, 50))),
                        child: loading
                            ? const SizedBox(
                                height: 20,
                                width: 20,
                                child: CircularProgressIndicator(
                                  color: Colors.white,
                                ),
                              )
                            : const Text('执行'),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Flexible(
                        flex: 5,
                        child: CodeField(
                          controller: _codeController!,
                          textStyle: const TextStyle(fontFamily: 'SourceCode'),
                        ),
                      )
                    ],
                  ),
                ],
              )),
            )));
  }

  late bool loading = false;
}
